<template>
  <div class="connection">
    <div class="menu" :style="{ 'width': isCollapse ? '72px' : '216px' }">
      <el-menu mode="vertical" :default-active="active" :collapse="isCollapse">
        <el-menu-item index="New" @click="change('New')">
          <i class="el-icon-plus"></i>
          <template slot="title">创建连接</template>
        </el-menu-item>
        <el-menu-item v-for="connection in connections" :key="connection.id" :index="connection.id"
          @click="change(connection.id)">
          <i class="el-icon-link"></i>
          <template slot="title">{{ connection.name }}</template>
        </el-menu-item>
      </el-menu>
      <div class="operation" @click="isCollapse = !isCollapse">
        <i v-if="!isCollapse" class="el-icon-s-fold"></i>
        <i v-else class="el-icon-s-unfold"></i>
      </div>
    </div>
    <div class="data">
      <NewConnection v-show="active === 'New'"></NewConnection>
      <ConnectionData v-for="connection in connections" :key="connection.id" :connectionId="connection.id"
        v-show="active === connection.id"></ConnectionData>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import NewConnection from './connection/NewConnection.vue'
import ConnectionData from './connection/ConnectionData.vue'

export default {
  props: {},
  components: { NewConnection, ConnectionData },
  data() {
    return {
      isCollapse: false,
      active: ''
    }
  },
  computed: {
    ...mapGetters({
      connections: 'global/getConnections'
    })
  },
  watch: {
    connections: {
      handler(newVal) {
        const connections = newVal
        if (connections && connections.length > 0) {
          this.active = connections[0].id
        } else {
          this.active = 'New'
        }
      },
      immediate: true
    }
  },
  methods: {
    change(name) {
      this.active = name
    },
    ...mapActions({
      setConnections: 'global/setConnections'
    })
  },
  beforeCreate() { },
  created() { },
  beforeDestroy() { },
  destroyed() { }
}
</script>
<style lang="scss" scoped>
@use '../../assets/scss/var.scss' as *;

.connection {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;

  .menu {
    min-width: 60px;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;

    .operation {
      margin-top: auto;
      height: 56px;
      line-height: 56px;
      text-align: center;

      &:hover {
        cursor: pointer;

        @include useTheme {
          background-color: coloren($color: getVar('primary-color'), $amount: 45%);
        }
      }

      i {
        font-size: 18px;

        @include useTheme {
          color: getVar('title-color');
        }
      }
    }

    @include useTheme {
      border-right: 1px solid getVar('border-color-base');
      background-color: getVar('card-background-color');
    }
  }

  .data {
    flex: 1;
    min-height: 600px;
    overflow: auto;
  }
}
</style>